<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>可展开搜索框</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="middle">
      <form action="index.html" class="search-box" method="post">
        <input type="text" class="input-3" name="" valur="">
        <button type="button" class="input3-btn" name="button"></button>
      </form>
    </div>

  <script type="text/javascript">
    $(".input3-btn").on("click",function() {
      $(".input-3").toggleClass("inclicked");
      $(".input3-btn").toggleClass("close");
    });
  </script>
  </body>
</html>